<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        justify-content: space-evenly;
        border: 1px solid red;
        align-content: flex-start;
        flex-wrap: wrap;
      }
      .list {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        margin: 10px;
      }
      /* 和列表一样的宽度和margin值,只取子项的左右，不取上下 */
      .container > i {
        width: 200px;
        margin: 0 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
      <!-- i的个数取决于宽屏时小盒子的最大个数
          在vue中可以使用v-for进行比遍历元素 
      -->
    </div>
  </body>
</html>
<!-- 实现的关键就是占位的<i>元素宽度和margin大小设置得和.list列表元素一样即可，其他样式都不需要写。 -->
<!-- 
    .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: -10px;
}
.list {
    width: 100px; height:100px;
    background-color: skyblue;
    margin: 15px 10px 0 0;
}
/* 和列表一样的宽度和margin值 */
.container > i {
    width: 100px;
    margin-right: 10px;
}
 -->

<!-- 这里有一个问题随着列的不固定，中间的间隙会不一样大 -->
